<template>
  <div class="application-container">
    <!-- 顶部导航（与Dashboard一致） -->
    <div class="wave-header">
      <!-- 保持原有波浪样式不变 -->
    </div>

    <!-- 报考流程图 -->
    <div class="process-section">
      <el-steps :active="activeStep" finish-status="success" align-center>
        <el-step title="选择专业" description="选择报考专业方向" />
        <el-step title="填写资料" description="填写个人信息资料" />
        <el-step title="上传材料" description="上传所需证明文件" />
        <el-step title="确认提交" description="确认并提交申请" />
      </el-steps>
    </div>

    <!-- 表单区域 -->
    <div class="form-container">
      <el-form :model="form" label-position="top" class="application-form">
        <!-- 步骤1：选择专业 -->
        <div v-show="activeStep === 0">
          <h2 class="form-title">选择报考专业</h2>

          <!-- 新增本科信息 -->
          <div class="form-section">
            <h3>本科教育背景</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="本科学校" required>
                  <el-select
                      v-model="form.undergraduateSchool"
                      placeholder="请选择本科院校"
                      filterable
                      clearable
                  >
                    <el-option
                        v-for="school in undergraduateSchools"
                        :key="school.value"
                        :label="school.label"
                        :value="school.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="本科专业" required>
                  <el-select
                      v-model="form.undergraduateMajor"
                      placeholder="请选择本科专业"
                      filterable
                      clearable
                  >
                    <el-option
                        v-for="major in undergraduateMajors"
                        :key="major.value"
                        :label="major.label"
                        :value="major.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 研究生报考信息 -->
          <div class="form-section">
            <h3>研究生报考信息</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="报考学院" required>
                  <el-select
                      v-model="form.college"
                      placeholder="请选择学院"
                      filterable
                      clearable
                  >
                    <el-option
                        v-for="college in colleges"
                        :key="college.value"
                        :label="college.label"
                        :value="college.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报考专业" required>
                  <el-select
                      v-model="form.major"
                      placeholder="请选择专业"
                      filterable
                      clearable
                  >
                    <el-option
                        v-for="major in majors"
                        :key="major.value"
                        :label="major.label"
                        :value="major.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="研究方向" required>
              <el-select
                  v-model="form.direction"
                  placeholder="请选择研究方向"
                  filterable
                  clearable
              >
                <el-option
                    v-for="direction in researchDirections"
                    :key="direction.value"
                    :label="direction.label"
                    :value="direction.value"
                />
              </el-select>
            </el-form-item>
          </div>
        </div>

        <!-- 步骤2：填写资料 -->
        <div v-show="activeStep === 1">
          <h2 class="form-title">填写个人信息</h2>

          <div class="form-section">
            <h3>基本信息</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="姓名" required>
                  <el-input v-model="form.name" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="学号" required>
                  <el-input v-model="form.studentId" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="身份证号" required>
                  <el-input v-model="form.idCard" maxlength="18" show-word-limit />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" required>
                  <el-input v-model="form.phone" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="电子邮箱" required>
              <el-input v-model="form.email" type="email" />
            </el-form-item>
          </div>

          <div class="form-section">
            <h3>户籍信息</h3>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="省份" required>
                  <el-select v-model="form.province" placeholder="请选择省份">
                    <el-option
                        v-for="province in provinces"
                        :key="province.value"
                        :label="province.label"
                        :value="province.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="城市" required>
                  <el-select v-model="form.city" placeholder="请选择城市">
                    <el-option
                        v-for="city in cities"
                        :key="city.value"
                        :label="city.label"
                        :value="city.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="区县" required>
                  <el-select v-model="form.district" placeholder="请选择区县">
                    <el-option
                        v-for="district in districts"
                        :key="district.value"
                        :label="district.label"
                        :value="district.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="详细地址" required>
              <el-input v-model="form.address" placeholder="街道、门牌号等详细地址" />
            </el-form-item>
          </div>
        </div>

        <!-- 步骤3：上传材料 -->
        <div v-show="activeStep === 2">
          <h2 class="form-title">上传申请材料</h2>

          <div class="form-section">
            <h3>身份证明文件</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="身份证正面照片" required>
                  <el-upload
                      action="#"
                      :limit="1"
                      :on-change="handleIdFrontChange"
                      :auto-upload="false"
                      :show-file-list="true"
                      accept=".jpg,.jpeg,.png"
                  >
                    <el-button type="primary">上传正面</el-button>
                    <template #tip>
                      <div class="upload-tip">请上传身份证人像面，支持JPG/PNG，最大5MB</div>
                    </template>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证反面照片" required>
                  <el-upload
                      action="#"
                      :limit="1"
                      :on-change="handleIdBackChange"
                      :auto-upload="false"
                      :show-file-list="true"
                      accept=".jpg,.jpeg,.png"
                  >
                    <el-button type="primary">上传反面</el-button>
                    <template #tip>
                      <div class="upload-tip">请上传身份证国徽面，支持JPG/PNG，最大5MB</div>
                    </template>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <div class="form-section">
            <h3>学历证明文件</h3>
            <el-form-item label="个人简历（PDF格式）" required>
              <el-upload
                  action="#"
                  :limit="1"
                  :on-change="handleResumeChange"
                  :auto-upload="false"
                  accept=".pdf"
              >
                <el-button type="primary">选择文件</el-button>
                <template #tip>
                  <div class="upload-tip">支持PDF格式，最大10MB</div>
                </template>
              </el-upload>
            </el-form-item>

            <el-form-item label="成绩单（PDF格式）" required>
              <el-upload
                  action="#"
                  :limit="1"
                  :on-change="handleTranscriptChange"
                  :auto-upload="false"
                  accept=".pdf"
              >
                <el-button type="primary">选择文件</el-button>
                <template #tip>
                  <div class="upload-tip">支持PDF格式，最大10MB</div>
                </template>
              </el-upload>
            </el-form-item>
          </div>

          <div class="form-section">
            <h3>其他申请材料</h3>
            <el-form-item label="报名申请表（PDF格式）" required>
              <el-upload
                  action="#"
                  :limit="1"
                  :on-change="handleApplicationChange"
                  :auto-upload="false"
                  accept=".pdf"
              >
                <el-button type="primary">选择文件</el-button>
                <template #tip>
                  <div class="upload-tip">下载模板填写后上传，支持PDF格式，最大5MB</div>
                </template>
              </el-upload>
            </el-form-item>

            <el-form-item label="诚信考试承诺书（PDF格式）" required>
              <el-upload
                  action="#"
                  :limit="1"
                  :on-change="handleIntegrityChange"
                  :auto-upload="false"
                  accept=".pdf"
              >
                <el-button type="primary">选择文件</el-button>
                <template #tip>
                  <div class="upload-tip">下载模板签署后上传，支持PDF格式，最大5MB</div>
                </template>
              </el-upload>
            </el-form-item>

            <el-form-item label="其他证明材料（可选）">
              <el-upload
                  action="#"
                  :limit="3"
                  :on-change="handleOtherFilesChange"
                  :auto-upload="false"
                  multiple
                  accept=".pdf,.jpg,.jpeg,.png"
              >
                <el-button type="primary">选择文件</el-button>
                <template #tip>
                  <div class="upload-tip">支持PDF/图片格式，单个文件最大5MB</div>
                </template>
              </el-upload>
            </el-form-item>
          </div>
        </div>

        <!-- 步骤4：确认提交 -->
        <div v-show="activeStep === 3">
          <h2 class="form-title">确认申请信息</h2>
          <div class="review-section">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="本科学校">{{ form.undergraduateSchool || '未填写' }}</el-descriptions-item>
              <el-descriptions-item label="本科专业">{{ form.undergraduateMajor || '未填写' }}</el-descriptions-item>
              <el-descriptions-item label="报考学院">{{ form.college || '未填写' }}</el-descriptions-item>
              <el-descriptions-item label="报考专业">{{ form.major || '未填写' }}</el-descriptions-item>
              <el-descriptions-item label="研究方向">{{ form.direction || '未填写' }}</el-descriptions-item>
              <el-descriptions-item label="姓名">{{ form.name || '未填写' }}</el-descriptions-item>
              <el-descriptions-item label="学号">{{ form.studentId || '未填写' }}</el-descriptions-item>
              <el-descriptions-item label="身份证号">{{ form.idCard || '未填写' }}</el-descriptions-item>
              <el-descriptions-item label="联系电话">{{ form.phone || '未填写' }}</el-descriptions-item>
              <el-descriptions-item label="电子邮箱">{{ form.email || '未填写' }}</el-descriptions-item>
              <el-descriptions-item label="户籍地址">
                {{ form.province || '' }} {{ form.city || '' }} {{ form.district || '' }} {{ form.address || '' }}
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <div class="agreement">
            <el-checkbox v-model="agreed">
              我已阅读并同意<el-link type="primary" href="#">《研究生招生报考协议》</el-link>
              和<el-link type="primary" href="#">《诚信考试承诺书》</el-link>
            </el-checkbox>
          </div>
        </div>

        <!-- 导航按钮 -->
        <div class="form-actions">
          <el-button
              v-if="activeStep > 0"
              @click="prevStep"
              plain
          >上一步</el-button>

          <el-button
              v-if="activeStep < 3"
              type="primary"
              @click="nextStep"
          >下一步</el-button>

          <el-button
              v-if="activeStep === 3"
              type="success"
              :disabled="!agreed"
              @click="submitApplication"
          >提交申请</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { School } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 学生信息
const studentName = ref('张同学')
const lastLogin = ref('2023-09-20 14:30')
const avatar = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')

// 步骤控制
const activeStep = ref(0)
const agreed = ref(false)

// 表单数据
const form = reactive({
  // 步骤1
  undergraduateSchool: '',
  undergraduateMajor: '',
  college: '',
  major: '',
  direction: '',

  // 步骤2
  name: '',
  studentId: '',
  idCard: '',
  phone: '',
  email: '',
  province: '',
  city: '',
  district: '',
  address: '',

  // 步骤3
  idCardFront: null as File | null,
  idCardBack: null as File | null,
  resume: null as File | null,
  transcript: null as File | null,
  applicationAttachment: null as File | null,
  integrityDeclaration: null as File | null,
  otherFiles: [] as File[]
})

// 本科学校选项
const undergraduateSchools = [
  { value: 'pku', label: '北京大学' },
  { value: 'tsinghua', label: '清华大学' },
  { value: 'fudan', label: '复旦大学' },
  { value: 'sjtu', label: '上海交通大学' },
  { value: 'zju', label: '浙江大学' },
  { value: 'nju', label: '南京大学' },
  { value: 'ustc', label: '中国科学技术大学' }
]

// 本科专业选项
const undergraduateMajors = [
  { value: 'cs', label: '计算机科学与技术' },
  { value: 'ee', label: '电子信息工程' },
  { value: 'me', label: '机械工程' },
  { value: 'ce', label: '土木工程' },
  { value: 'bio', label: '生物科学' },
  { value: 'chem', label: '化学' },
  { value: 'math', label: '数学与应用数学' },
  { value: 'physics', label: '物理学' }
]

// 学院选项
const colleges = [
  { value: 'computer', label: '计算机学院' },
  { value: 'business', label: '商学院' },
  { value: 'engineering', label: '工程学院' },
  { value: 'arts', label: '艺术学院' },
  { value: 'science', label: '理学院' }
]

// 专业选项
const majors = [
  { value: 'cs', label: '计算机科学与技术' },
  { value: 'se', label: '软件工程' },
  { value: 'ai', label: '人工智能' },
  { value: 'ds', label: '数据科学' },
  { value: 'is', label: '信息安全' }
]

// 研究方向选项
const researchDirections = [
  { value: 'ml', label: '机器学习' },
  { value: 'cv', label: '计算机视觉' },
  { value: 'nlp', label: '自然语言处理' },
  { value: 'bd', label: '大数据分析' },
  { value: 'iot', label: '物联网技术' }
]

// 省份选项
const provinces = [
  { value: 'beijing', label: '北京市' },
  { value: 'shanghai', label: '上海市' },
  { value: 'guangdong', label: '广东省' },
  { value: 'jiangsu', label: '江苏省' },
  { value: 'zhejiang', label: '浙江省' }
]

// 城市选项（示例数据）
const cities = [
  { value: 'beijing', label: '北京市' },
  { value: 'shanghai', label: '上海市' },
  { value: 'guangzhou', label: '广州市' },
  { value: 'shenzhen', label: '深圳市' },
  { value: 'nanjing', label: '南京市' },
  { value: 'hangzhou', label: '杭州市' }
]

// 区县选项（示例数据）
const districts = [
  { value: 'haidian', label: '海淀区' },
  { value: 'chaoyang', label: '朝阳区' },
  { value: 'pudong', label: '浦东新区' },
  { value: 'xuhui', label: '徐汇区' },
  { value: 'tianhe', label: '天河区' },
  { value: 'yuexiu', label: '越秀区' }
]

// 步骤导航
const nextStep = () => {
  if (activeStep.value < 3) {
    activeStep.value++
  }
}

const prevStep = () => {
  if (activeStep.value > 0) {
    activeStep.value--
  }
}

// 文件上传处理
const handleIdFrontChange = (file: any) => {
  form.idCardFront = file.raw
}

const handleIdBackChange = (file: any) => {
  form.idCardBack = file.raw
}

const handleResumeChange = (file: any) => {
  form.resume = file.raw
}

const handleTranscriptChange = (file: any) => {
  form.transcript = file.raw
}

const handleApplicationChange = (file: any) => {
  form.applicationAttachment = file.raw
}

const handleIntegrityChange = (file: any) => {
  form.integrityDeclaration = file.raw
}

const handleOtherFilesChange = (file: any) => {
  form.otherFiles.push(file.raw)
}

// 提交申请
const submitApplication = () => {
  if (!agreed.value) {
    ElMessage.warning('请先同意报考协议和诚信考试承诺书')
    return
  }

  // 这里实际应该是API调用
  console.log('提交申请数据:', form)

  ElMessage.success('报考申请提交成功！')
  setTimeout(() => {
    router.push('/dashboard')
  }, 1500)
}
</script>

<style scoped>
.application-container {
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
  min-height: 100vh;
  background-color: #f5f7fa;
  color: #333;
  padding-bottom: 40px;
}

/* 复用Dashboard的波浪样式 */
.wave-header {
  position: relative;
  background: linear-gradient(135deg,  #1a2b4b, #2c5282);
  color: white;
  height: 220px;
  overflow: hidden;
}

/* 流程图样式 */
.process-section {
  background: white;
  padding: 30px 20px;
  margin: 20px auto;
  max-width: 1200px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* 表单容器 */
.form-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 30px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.form-title {
  color: #1a2b4b;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e0e0e0;
}

/* 表单分组样式 - 修复问题 */
.form-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: #fafbfc;
  /* 添加重要修复 */
  overflow: visible !important;
}

.form-section h3 {
  color: #1a2b4b;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e0e0e0;
}

/* 表单样式 */
.application-form {
  max-width: 900px;
  margin: 0 auto;
}

.el-form-item {
  margin-bottom: 25px;
}

.upload-tip {
  margin-top: 8px;
  color: #777;
  font-size: 13px;
  line-height: 1.4;
}

/* 信息确认区域 */
.review-section {
  margin-bottom: 30px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.agreement {
  margin: 25px 0;
  text-align: center;
}

/* 表单操作按钮 */
.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.el-button {
  min-width: 120px;
  padding: 12px 24px;
  font-size: 16px;
}

/* 修复下拉框显示问题 */
.el-select, .el-input {
  width: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .form-container {
    padding: 20px;
  }

  .form-section {
    padding: 15px;
  }

  .form-actions {
    flex-direction: column;
    gap: 10px;
  }

  .el-button {
    width: 100%;
  }

  /* 移动端优化 */
  .el-row, .el-col {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .el-col {
    margin-bottom: 15px;
  }
}
</style>